<template>
  <div class="welcome-box">
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in photoList" :key="item.id">
        <img class="logo" :src="item.idView" alt="logo">
      </el-carousel-item>
    </el-carousel>
    <br/>
    <div align='center'>
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="100"></el-avatar>
    </div>
    <div align='center'>
      <p class="welText">欢迎登陆后台管理系统</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoList:[
        {id: 0, idView: require('../assets/images/0101.jpg')},
        {id: 1, idView: require('../assets/images/0202.jpg')},
        {id: 2, idView: require('../assets/images/0303.jpg')},
        {id: 3, idView: require('../assets/images/0404.jpg')}
      ]
    }
  },
  created() {
  },
  methods: {

  },
  components: {

  }
}
</script>

<style lang='less' scoped>
div.welcome-box{
  margin-top: 40px;
}
.el-carousel__item img {
    width:100%;
    height: 100%;
    overflow: hidden;
    border: 0;
  }
  
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

p.welText{
  font-size: 26px;
}
</style>
